@use 'sass:map';

@function color-contrasted ($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  // yiq
  // https://baike.baidu.com/item/%E9%A2%9C%E8%89%B2%E7%A9%BA%E9%97%B4/10834848
  $y: $r * 0.299 + $g * 0.587 + $b * 0.114; // 灰度化 https://baike.baidu.com/item/%E7%81%B0%E5%BA%A6%E5%8C%96
  // $i: $r * 0.596 - $g * 0.275 - $b * 0.321;
  // $q: $r * 0.212 - $g * 0.523 + $b * 0.311;

  @if ($y > $yiq-contrasted-threshold) {
    @return $yiq-contrasted-dark;
  } @else {
    @return $yiq-contrasted-light;
  }
}

@mixin button ($style) {
  $bgc: map.get($style, 'background-color');
  $bgc: if($bgc, $bgc, transparent);
  $bc: map.get($style, 'border-color');
  $bc: if($bc, $bc, $bgc);
  $c: map.get($style, 'color');
  $c: if($c, $c, color-contrasted($bgc));

  background-color: $bgc;
  border: 1px solid $bc;
  color: $c;
}

// 按钮风格
@each $name, $style in $button-style {
  .button-#{$name} {
    @include button($style);
  }
}

// 按钮尺寸
@each $size, $value in $button-size {
  .button-#{$size} {
    height: $value;
  }
}
